<template>
    <div style="background-color: white; padding:30px 25px; border-radius: 20px 20px 0 0; font-size: 13px">
      <div class="header">
        <i class="icon-fanhui go_back" @click="goBack"></i>
        <span class="title" v-if="form.orderStatus != 2">工单详情</span>
        <span class="title" v-else>已关闭工单详情</span>
      </div>
      <div class="item">
        <p class="item_title">工单基本信息</p>
        <div class="item_center">
          <span class="item_label">标题：</span>
          <span style="display: inline-block; width: 180px">{{form.title}}</span>
          <span class="item_label">优先级：</span>
          <span v-if="form.orderLevel == '0'">普通</span>
          <span v-if="form.orderLevel == '1'">紧急</span>
        </div>
        <div class="item_center">
          <span class="item_label">状态：</span>
          <span v-if="form.orderStatus == 0" style="display: inline-block; width: 180px">未受理</span>
          <span v-if="form.orderStatus == 1" style="display: inline-block; width: 180px">受理中</span>
          <span v-if="form.orderStatus == 2" style="display: inline-block; width: 180px">已关闭</span>

          <span class="item_label">联系时间：</span>
          <span v-if="form.replyTimeType == '0'">任何时间</span>
          <span v-if="form.replyTimeType == '1'">工作日（周一 ~ 周五）9:00 - 18:00</span>
        </div>
        <div class="item_center">
          <span class="item_label">手机号：</span>
          <span style="display: inline-block; width: 180px">{{form.phone}}</span>
          <span class="item_label">邮箱：</span>
          <span>{{form.email}}</span>
        </div>
        <div class="item_center">
          <span class="item_label">类别：</span>
          <span>{{form.orderType}}</span>
        </div>
        <div class="item_center">
          <span class="item_label">问题描述：</span>
          <span>{{form.description}}</span>
        </div>
      </div>

      <div v-if="form.orderStatus == 0">
        <div style="text-align: center;margin-top: 30px">
          <el-button size="small" type="primary" style="width: 300px" @click="accept">处理工单</el-button>
        </div>
      </div>
      <div v-else>
        <div class="item">
          <p class="item_title">沟通记录</p>
          <div class="item_center connect" v-for="(item,index) in form.communications" :key="index">
            <img :src="item.userPic" class="header_img"/>
            <div>
              <span class="user_name">{{item.userName}}</span>
              <p class="user_message">{{item.content}}</p>
              <span class="connect_time">{{item.createTime}}</span>
            </div>
          </div>
          <span ></span>
        </div>

        <!--   留言是否显示，（是否是当前人所沟通的工单）   -->
        <div class="item" v-if="form.isMine">
          <p class="item_title">提交留言</p>
          <div v-if="form.orderStatus != 2">
            <div class="item_center">
              <span class="item_label">留言：</span>
              <el-input
                type="textarea"
                :rows="4"
                style="width: 800px"
                placeholder="请输入内容"
                v-model="textarea">
              </el-input>
            </div>
            <el-button type="primary" size="small" style="margin-left: 135px" @click="submit">提交</el-button>
          </div>
          <div v-else>
            <div class="item_center">
              <span class="item_label">评价</span>
              <el-rate
                style="display: inline-block"
                v-model="form.isEvaluated"
                disabled
                :colors="['#D56A52']"
                score-template="{value}">
              </el-rate>
            </div>
            <div class="item_center">
              <span class="item_label">问题是否解决：</span>
              <span v-if="form.isSolved">已解决</span>
              <span v-if="!form.isSolved">未解决</span>
            </div>
            <div class="item_center">
              <span class="item_label">意见与反馈：</span>
              <span>{{form.remarks}}</span>
            </div>
            <div class="item_center">
              <span class="item_label">评价时间：</span>
              <span>{{form.modifyTime}}</span>
            </div>
          </div>

        </div>
      </div>

      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        center>
        <span slot="title" class="dialog-title">提交留言</span>

        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入留言..."
          v-model="textarea">
        </el-input>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false" size="small">提 交</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
    import {workOrderDetail, workOrderCommunication, acceptFeedback, workOrderClose, evaluate} from '@/api/feedback'
    export default {
        name: "detail",
        data() {
          return {
              textarea: '',
              value:3,
              form: {},
              dialogVisible: false
          }
        },
        created() {
          this.init()
        },
        methods: {
            init() {
                workOrderDetail(this.$route.params.id).then(res => {
                    if(res.data.success) {
                      this.form = res.data.data
                    }
                })
            },
            goBack() {
                this.$router.go(-1)
            },
            submit() {
                workOrderCommunication(this.$route.params.id, this.textarea).then(res => {
                    if(res.data.success) {
                        this.textarea = ''
                        this.init()
                    }
                })
            },
            accept() { // 受理工单
                acceptFeedback(this.$route.params.id).then(res => {
                    if(res.data.success) {
                        this.dialogVisible = true
                        this.init()
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
.go_back{
  font-size: 25px !important;
  color: #2A97F9;
  cursor: pointer;
}
  .title{
    font-size: 18px;
    font-weight: 600;
    color: #435B77;
    margin-left: 10px;
  }
  .item_title{
    color: #2A97F9;
    background-color:#EAF0F6 ;
    line-height: 30px;
    padding-left: 37px;
  }
  .item{
    margin-top: 25px;
  }
  .item_center{
    padding: 10px 37px;
  }
  .item_label{
    display: inline-block;
    width: 92px;
  }
  .header_img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 24px;
  }
  .connect{
    display: flex;
    align-items: center;
    padding: 10px 45px;
  }
  .user_name .user_message{
    color: #435B77;
  }
  .connect_time{
    color:#8C8C8C ;
  }
</style>
